<template>
    <!-- <h3>用户中心</h3> -->
    <div class="user">
        <header class="user-header container">
            <div class="img-box">
                <img src="http://localhost:3001/static/resources/imgs/photo-20251021-1760985549477.png" alt="">
            </div>
            <p>用户名</p>
            <p>账号</p>
        </header>

        <section class="user-main container">
            <ul class="list-group list-group-flush">
                <li class="list-group-item">我的资料</li>
                <li class="list-group-item">我的收藏</li>
                <li class="list-group-item">我的签到</li>
                <li class="list-group-item">免责声明</li>
                <li class="list-group-item">账号安全</li>
                <li class="list-group-item">退出登录</li>
                <li class="list-group-item" style="text-align: center;">
                    <router-link to="/home" style="color: #000;">跳转首页</router-link>
                </li>
            </ul>
        </section>

    </div>
</template>

<style lang="less">
.user {
    padding: 50px 0px;
    .user-header {
        text-align: center;
        .img-box {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            overflow: hidden;
            margin: 0 auto;
            img {
                width: 150px;
                height: 150px;
                vertical-align: middle;
            }
        }
        p {
            margin-top: 20px;
        }
    }
    .list-group-flush {
        li {
            padding: 14px 15px;
        }
    }
}
</style>